<template>
  <div class="app">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设定工时定额</span>
      </div>
      <div>
        <el-form :inline="true" :model="searchParams" class="demo-form-inline" size="mini">
          <el-form-item label="设备序列号">
            <el-input v-model="searchParams.id"></el-input>
          </el-form-item>
          <el-form-item label="工段名称">
            <el-select v-model="searchParams.stageName" placeholder>
              <el-option v-for="item in stageList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="工序名称">
            <el-select v-model="searchParams.processName" placeholder>
              <el-option v-for="item in processList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="工时设定状态">
            <el-radio-group v-model="searchParams.settingStatus" @change="checkStatus">
              <el-radio :label="0">未设定</el-radio>
              <el-radio :label="1">已设定</el-radio>
              <el-radio :label="2">所有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="产品分类">
            <el-select v-model="searchParams.productType" @change="checkProductType">
              <el-option
                v-for="item in productTypeList"
                :key="item"
                :label="item.F_FullName"
                :value="item.F_Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="产品编号">
            <el-select v-model="searchParams.productCode" @change="checkProductCode">
              <el-option
                v-for="item in productCodeList"
                :key="item"
                :label="item.F_Id"
                :value="item.F_Id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          v-loading="listLoading"
          :data="tableData"
          stripe
          height="550"
          style="width: 100%;font-size:12px;"
        >
          <el-table-column align="center" prop="CodeId" label="代码编号" />
          <el-table-column align="center" prop="SettingStatus" label="设定状态" />
          <el-table-column align="center" prop="WorkingHours" label="工时定额(分钟)">
            <el-input size="mini" v-model="tableData.WorkingHours"></el-input>
          </el-table-column>
          <el-table-column align="center" prop="date" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" round plain size="mini" @click="save(scope.row)">保存</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getList,
  edit,
  getDeviceName,
  getDeviceCode,
  SearchWorkingHoursList,
  GetProductTypeList,
  GetProductList,
  getStageList,
  SaveWorkingHours
} from "@/api/initDevice";

export default {
  name: "InitDevice2",
  data() {
    return {
      searchParams: {
        id: "12234",
        deviceCode: "192.168.1.250",
        settingStatus: 2, //（0：未设定，1：已设定,2:所有）
        productType: "",
        productCode: "SF01",
        searchCode: "F25-100",
        stageName: "",
        processName: ""
      },
      tableData: [],
      listLoading: true,
      dialogFormVisible: false,
      formLabelWidth: "140px",
      deviceNameList: {},
      deviceCodeList: {},
      processList: {},
      stageList: {},
      productTypeList: {}
    };
  },
  computed: {
    ...mapGetters(["name"])
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    handleSearch() {
      var params = {
        deviceCode: "192.168.1.250",
        settingStatus: this.searchParams.settingStatus,
        productCode: this.searchParams.productCode,
        searchCode: "F25-100"
      };
      SearchWorkingHoursList(params).then(response => {
        this.tableData = response.data.list;
      });
    },
    checkStatus(val) {
      this.searchParams.settingStatus = val;
    },
    checkProductType(val) {
      this.searchParams.productType = val;
    },
    checkProductCode(val) {
      this.searchParams.productCode = val;
    },
    save(rowData) {
      var params = {
        workingHoursId: rowData.F_Id,
        gongShi: rowData.WorkingHours
      };
      console.log("【保存入参】", params);
      SaveWorkingHours(params).then(response => {
        if (response.success) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(response.message);
        }
      });
    },
    changDeviceName() {
      getDeviceCode({ id: this.fromData.deviceName }).then(response => {
        this.deviceCodeList = response.data.list;
      });
    },
    changProcessList(stageId) {
      getProcessList({ id: stageId }).then(response => {
        console.log("【工序列表：】", this.processList);
        this.processList = response.data.list;
      });
    },
    chang(val) {
      this.fromData.name = val.name;
      this.fromData.id = val.id;
      this.dialogFormVisible = true;
      this.changProcessList(val.id);
    },
    statusbColor(val) {
      if (val === "等待") {
        return "color:#ccc";
      }
      if (val === "故障") {
        return "color:red";
      }
      if (val === "正在运行") {
        return "color:#4CA666";
      }
    },
    initData() {
      this.listLoading = true;
      // getList().then(response => {
      //   this.tableData = response.data.list;
      //   this.listLoading = false;
      // });
      // getDeviceName().then(response => {
      //   this.deviceNameList = response.data.list;
      //   this.listLoading = false;
      // });
      this.handleSearch();
      GetProductTypeList().then(response => {
        this.productTypeList = response.data.list;
        this.listLoading = false;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.app {
  font-size: 12px;
  padding: 45px 45px 0 45px;
}
/deep/ .el-card__header {
  padding: 10px 20px;
  span {
    margin: 5px 0;
    float: left;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    padding-left: 10px;
    border-left: #2b99fa solid 2px;
  }
  a {
    line-height: 22px;
  }
}
/deep/ .el-card__body {
  padding: 20px 10px;
}
/deep/ .el-dialog {
  border-radius: 5px;
}
/deep/ .el-dialog__footer {
  background: #f7f7f7;
  border-radius: 0 0 5px 5px;
}
.echarts-div {
  width: 100%;
  height: 170px;
  margin: 0 auto;
}
</style>
